      <template>
      	<view>
      		<view class="top_balance">
      			<view>我的余额：<text class="dou">{{vk.vuex.get('$user.userInfo.balance')}}</text>金豆</view>
      			<image src="https://7463-tcb-z5t43ep54akwmhw-3cvvc2867b7c-1320331498.tcb.qcloud.la/static/jindou.png" style="width: 30rpx;height: 30rpx;margin-left: 12rpx;"></image>
      		</view>

      		<!-- 系统是IOS，则根据条件拉起支付 -->
      		<view v-if="vk.vuex.get('$app.osName')=='ios'">
      			<view v-if="vk.vuex.get('$app.appinfo.iospay')">
      				<view
      					v-if="!vk.vuex.get('$user.userInfo.invite_code')||vk.vuex.get('$user.userInfo.invite_code')=='0'">
      					<u-empty mode="permission" icon="http://cdn.uviewui.com/uview/empty/permission.png"
      						text="由于相关规范，ios功能暂不可用" textColor="#191919" textSize="22px">
      					</u-empty>
      				</view>
      				<view v-else>
      					<view class="boxTemplate">
      						<view v-for="(item,index) in recharge" :key="index" style="margin-left: 10rpx;">
      							<!-- @click="createOrder(item,index)" -->
      							<view class="Scheme" v-if="item.subject != '单剧会员'">
      								<view class="Schemecontentss"
      									v-if="item.subject == '月度会员' || item.subject == '季度会员' || item.subject == '年度会员'"
      									@click="createOrder(item,index)">
      									<view class="Judge">{{item.subject}}</view>
      									<view class="RechargeAmount">￥{{item.recharge_amount / 100}}</view>
      									<view class="RechargeText">{{item.recharge_text}}</view>
      								</view>
      								<view class="Schemecontentss" v-else-if="item.subject == '自定义会员'"
      									@click="createOrder(item,index)">
      									<view class="Judge">VIP会员</view>
      									<view class="RechargeAmount">￥{{item.recharge_amount / 100}}</view>
      									<view class="RechargeText">{{item.recharge_text}}</view>
      								</view>
      								<view class="Schemecontentss"
      									v-else-if="item.subject == '单剧会员' && item.tv_id == tv_id"
      									@click="createOrder(item,index)">
      									<view class="Judge">解锁全集</view>
      									<view class="RechargeAmount">￥{{item.recharge_amount / 100}}</view>
      									<view class="RechargeText">{{item.recharge_text}}</view>
      								</view>
      								<view class="Schemecontent"
      									v-else-if="item.judge == true && item.subject != '单剧会员'"
      									@click="createOrder(item,index)">
      									<view class="Judge">特惠</view>
      									<view class="RechargeAmount">￥{{item.recharge_amount / 100}}</view>
      									<view class="GiveBean" v-if="item.give_bean">多送{{item.give_bean}}豆</view>
      									<view class="RechargeText">{{item.recharge_text}}</view>
      									<view class="PercentageUser">{{item.percentage_user || 99}}%的用户选择</view>
      								</view>

      								<view class="Schemecontents"
      									v-else-if="item.judge == false && item.subject != '单剧会员'"
      									@click="createOrder(item,index)">
      									<view class="RechargeAmount">￥{{item.recharge_amount / 100}}</view>
      									<view class="GiveBean" v-if="item.give_bean">多送{{item.give_bean}}豆</view>
      									<view class="RechargeText">{{item.recharge_text}}</view>
      								</view>

      							</view>
      						</view>

      						<u-gap height="30rpx"></u-gap>
      						<view>
      							<view class="explanation">充值说明：</view>
      							<view class="" v-for="(item, index) in splitText" :key="index">
      								<view class="explanation">{{index+1 }}.{{ item }}</view>
      							</view>
      						</view>
      					</view>
      				</view>
      			</view>
      			<view v-else>
      				<u-empty mode="permission" icon="http://cdn.uviewui.com/uview/empty/permission.png"
      					text="由于相关规范，ios功能暂不可用" textColor="#191919" textSize="22px">
      				</u-empty>
      			</view>
      		</view>

      		<!-- 系统不是IOS，则无条件拉起支付 -->
      		<view v-if="vk.vuex.get('$app.osName')!='ios'" class="boxTemplate">
      			<view v-for="(item,index) in recharge" :key="index" style="margin-left: 10rpx;">
      				<view class="Scheme" v-if="item.subject != '单剧会员' ">
      					<view class="Schemecontentss"
      						v-if="item.subject == '月度会员' || item.subject == '季度会员' || item.subject == '年度会员'"
      						@click="createOrder(item,index)">
      						<view class="Judge">{{item.subject}}</view>
      						<view class="RechargeAmount">￥{{item.recharge_amount / 100}}</view>
      						<view class="RechargeText">{{item.recharge_text}}</view>
      					</view>
      					<view class="Schemecontentss" v-else-if="item.subject == '自定义会员'"
      						@click="createOrder(item,index)">
      						<view class="Judge">VIP会员</view>
      						<view class="RechargeAmount">￥{{item.recharge_amount / 100}}</view>
      						<view class="RechargeText">{{item.recharge_text}}</view>
      					</view>
      					<view class="Schemecontentss" v-else-if="item.subject == '单剧会员' && item.tv_id == tv_id"
      						@click="createOrder(item,index)">
      						<view class="Judge">解锁全集</view>
      						<view class="RechargeAmount">￥{{item.recharge_amount / 100}}</view>
      						<view class="RechargeText">{{item.recharge_text}}</view>
      					</view>
      					<view class="Schemecontent" v-else-if="item.judge == true && item.subject != '单剧会员'"
      						@click="createOrder(item,index)">
      						<view class="Judge">特惠</view>
      						<view class="RechargeAmount">￥{{item.recharge_amount / 100}}</view>
      						<view class="GiveBean" v-if="item.give_bean">多送{{item.give_bean}}豆</view>
      						<view class="RechargeText">{{item.recharge_text}}</view>
      						<view class="PercentageUser">{{item.percentage_user || 99}}%的用户选择</view>
      					</view>

      					<view class="Schemecontents" v-else-if="item.judge == false && item.subject != '单剧会员'"
      						@click="createOrder(item,index)">
      						<view class="RechargeAmount">￥{{item.recharge_amount / 100}}</view>
      						<view class="GiveBean" v-if="item.give_bean">多送{{item.give_bean}}豆</view>
      						<view class="RechargeText">{{item.recharge_text}}</view>
      					</view>

      				</view>
      			</view>

      			<u-gap height="30rpx"></u-gap>
      			<view>
      				<view class="explanation">充值说明：</view>
      				<view class="" v-for="(item, index) in splitText" :key="index">
      					<view class="explanation">{{index+1 }}.{{ item }}</view>
      				</view>
      			</view>
      		</view>


      		<view v-if="vk.vuex.get('$user.userInfo._id')">
      			<vk-uni-pay ref="vkPay" :query-payment-action="vkPay.queryPaymentAction" :status.sync="vkPay.status"
      				:code-url.sync="vkPay.codeUrl" :page-show="vkPay.pageShow" :polling="vkPay.polling"></vk-uni-pay>
      		</view>

      	</view>
      </template>

      <script>
      	const db = uniCloud.database();
      	const _ = db.command;
      	export default {
      		name: "rechargelist",
      		props: ['recharge', 'tv_name'],
      		data() {
      			return {
      				splitText: [], //充值说明
      				activeColor: 100,
      				balance: 0,
      				vkPay: {
      					queryPaymentAction: {
      						name: "vk-pay", // 云函数名称
      						action: "pay/queryPayment", // 路由模式下云函数地址
      						actionKey: "action", // 路由模式下云函数地址的识别key
      						dataKey: "data" // 路由模式下云函数请求参数的识别key
      					},
      					// PC支付的付款二维码地址 渲染二维码需要自己写，可以参考示例中的二维码组件 vk-uni-qrcode
      					codeUrl: "",
      					// 当前支付状态 0:等待发起支付 1:支付中 2:已支付
      					status: 0,
      					// 当前页面是否显示
      					pageShow: true,
      					// 启用轮询检测订单支付状态（仅h5支付有效）
      					polling: true
      				},
      				// 表单请求数据
      				form1: {
      					provider: "wxpay",
      					openid: "",
      					total_fee: 1,
      					out_trade_no: "",
      					subject: "充值金豆",
      					body: "得XX金豆",
      					type: "recharge"
      				},
      				encryptedKey: "", // sessionKey
      				osName: vk.vuex.get('$app.osName'), //机型

      			};
      		},
      		created() {
      			this.splitText = this.splitTextByNumber(vk.vuex.get('$app.appinfo.recharge_instructions'));
      			console.log("15211111111111111=>this.splitText:" + this.splitText[0]);
      			this.form1.openid = vk.vuex.get('$user.userInfo.wx_openid[mp-weixin]');
      			this.vkPay.pageShow = true;
      		},
      		methods: {
				// 钉钉预警
							DingDing(reason){
								vk.callFunction({
									url: 'client/pay/kh/prompt_msg',
									title: '请求中...',
									data: {
										uid:vk.vuex.get('$user.userInfo._id'),
										tv_id:this.tvinfo._id,
										tv_name:this.tvinfo.tv_name,
										appid:vk.vuex.get('$app.appid'),
										reason
									},
									success: (data) => {
										console.log('钉钉提示');
									}
								});
							},
      			//处理充值说明
      			splitTextByNumber(text) {
      				const regex = /\d+\./g; // 匹配数字和句号的正则表达式
      				return text.split(regex).filter(item => item !== ''); // 使用split()方法分割文本，并过滤掉空字符串
      			},
      			async createOrder(item, index) {
      				this.activeColor = index
      				var that = this;
      				//生成订单号
      				this.form1.out_trade_no = vk.pubfn.createOrderNo("NO")

      				vk.callFunction({
      					url: 'client/pay/kh/makeRecharge',
      					title: '数据校验中...',
      					data: {
      						out_trade_no: this.form1.out_trade_no,
      						cz_item: item,
      						tv_name: this.tv_name || "直充", //记录本次充值来自哪部剧，无来源就是直充
      						appid: vk.vuex.get('$app.appid'),
      						appname: vk.vuex.get('$app.appname'),
      						openid: this.form1.openid,
      						virtualPayment: 1
      					},
      					success: (data) => {
      						let add_id = data.add_order.id;
      						that.checkData(add_id)
      					}
      				});
      			},

      			async checkData(add_id) {
      				//从数据库里查找刚添加的订单数据，确保已提交到数据库
      				const order_info = await db.collection('a_recharge').doc(add_id).get()
      				//找到则发起订单，未找到user_id则提示失败
      				if (order_info.result.data.length > 0) {
      					if (order_info.result.data[0].user_id) {
      						if (vk.vuex.get('$app.osName') == 'ios') {
      							console.log('ios---商户号支付');
      							this.createPayment(order_info.result.data[0])
      						} else {
      							console.log('其他---虚拟支付');
      							this.createVirtualPayment(order_info.result.data[0])
      						}
      					} else {
							this.DingDing('云函数调用失败')
      						vk.toast('创建订单失败,请重试')
      					}
      				} else {
      					vk.toast('创建订单失败,请重试')
      				}
      			},
      			// 发起支付
      			createPayment(orderinfo) {
      				var that = this;
      				that.$refs.vkPay.createPayment({
      					// 如果是非路由框架，则action为字符串，值为云函数名称
      					// 如果是路由框架，则按下方配置填写
      					action: {
      						name: "vk-pay", // 云函数名称
      						action: "pay/createPayment", // 路由模式下云函数地址
      						actionKey: "action", // 路由模式下云函数地址的识别key(注意VK路由框架下,此值为$url)
      						dataKey: "data" // 路由模式下云函数请求参数的识别key
      					},
      					// 请求数据
      					data: {
      						pid: vk.vuex.get('$app.pid'), //对应vk-pay-config表里的每一项支付配置
      						user_id: orderinfo.user_id, //用户的user_id
      						provider: orderinfo.platform, //平台
      						total_fee: orderinfo.recharge_amount, //充值金额
      						out_trade_no: orderinfo.out_trade_no, //自己生成的订单号
      						subject: orderinfo.subject, //区分充值金豆或开通会员
      						bean_number: orderinfo.bean,
      						body: orderinfo.remark,
      						type: "recharge",
      						// 是否开始虚拟支付  1 表示开启
      						virtualPayment: orderinfo.virtualPayment
      					},
      					// 成功回调
      					success: res => {
      						that.toast("支付成功", "success");
      						console.log("paySuccess", res);
      						//重新获取用户信息，包括余额
      						vk.userCenter.loginByWeixin({
      							loading: false,
      							data: {
      								appid: vk.vuex.get('$app.appid'),
      								appsecret: "",
      								type: ""
      							},
      							success: (data) => {
      								vk.vuex.set('$app.showIndexCoupou', false) //支付成功则取消首页优惠充值的弹窗
      								// 成功后的逻辑
      								console.log("注册登录成功", vk.vuex.get('$user.userInfo'));
      								this.info = vk.vuex.get('$user.userInfo')
      							}
      						});
      					},
      					// 失败回调
      					fail: res => {
      						if (res.failType === "create") {
      							// 创建支付失败时提示
      							that.alert(res.msg);
      						} else if (res.failType === "request") {
      							// 请求支付失败时提示
      							that.toast("请求支付失败");
      						} else if (res.failType === "result") {
      							// 支付结果失败时提示
      							that.toast("支付失败");
      						}
      					},
      					// 取消回调
      					cancel: res => {
      						that.toast("用户取消支付");
      						//点取消，设置一下showIndexCoupou，返回首页后会弹窗优惠
      						vk.vuex.set('$app.showIndexCoupou', true)
      					}
      				});
      			},
      			// 安卓端 发起虚拟支付
      			createVirtualPayment(orderinfo) {
      				var that = this
      				//检查登录情况，没注册自动用openid注册，注册过的直接登录
      				vk.userCenter.loginByWeixin({
      					loading: false,
      					title: '请求中...',
      					data: {
      						appid: vk.vuex.get('$app.appid'),
      						appname: vk.vuex.get('$app.appname'),
      						appsecret: "",
      					},
      					success: (data) => {
      						console.log('dataencryptedKey', data);
      						that.encryptedKey = data.encryptedKey
      						vk.callFunction({
      							url: 'client/xcxzf/kh/hqcs',
      							title: '请求中...',
      							data: {
      								pid: vk.vuex.get('$app.pid'), //对应vk-pay-config表里的每一项支付配置
      								encryptedKey: that.encryptedKey,
      								out_trade_no: orderinfo.out_trade_no, //自己生成的订单号
      								total_fee: orderinfo.recharge_amount, //充值金额(数量)
      							},
      							success: (res) => {
      								let paySig = res.paySig
      								let signature = res.signature
      								let postbody = res.postbody

      								const paymentParams = {
      									mode: 'short_series_coin',
      									signData: postbody,
      									signature: signature,
      									paySig: paySig,
      									success(res) {
      										vk.callFunction({
      											url: 'client/xcxzf/kh/pay',
      											title: '请求中...',
      											data: {
      												openid: that.form1.openid,
      												pid: vk.vuex.get(
      													'$app.pid'
      												), //对应vk-pay-config表里的每一项支付配置
      												user_id: orderinfo
      													.user_id, //用户的user_id
      												provider: orderinfo
      													.platform, //平台
      												total_fee: orderinfo
      													.recharge_amount, //充值金额  （数量）
      												out_trade_no: orderinfo
      													.out_trade_no, //自己生成的订单号
      												subject: orderinfo
      													.subject, //区分充值金豆或开通会员
      												bean_number: orderinfo.bean,
      												body: orderinfo.remark,
      												type: "recharge",
      												os_name: that.osName // 用户机型
      											},
      											success: (res) => {
      												uni.showToast({
      													title: '支付成功',
      													duration: 2000
      												});
      												//重新获取用户信息，包括余额
      												vk.userCenter.loginByWeixin({
      													loading: false,
      													data: {
      														appid: vk
      															.vuex
      															.get(
      																'$app.appid'
      															),
      														appsecret: "",
      														type: ""
      													},
      													success: (
      														data
      													) => {
      														vk.vuex
      															.set(
      																'$app.showIndexCoupou',
      																false
      															) //支付成功则取消首页优惠充值的弹窗
      														// 成功后的逻辑
      														console
      															.log(
      																"注册登录成功",
      																vk
      																.vuex
      																.get(
      																	'$user.userInfo'
      																)
      															);
      														that.info =
      															vk
      															.vuex
      															.get(
      																'$user.userInfo'
      															)
      													}
      												});
      											},
      											fail(res) {
      												uni.showToast({
      													title: '支付成功',
      													duration: 2000
      												});
      												// 支付失败回调
      												console.log('支付失败：', res);

      												vk.userCenter.loginByWeixin({
      													loading: false,
      													data: {
      														appid: vk.vuex
      															.get(
      																'$app.appid'
      															),
      														appsecret: "",
      														type: ""
      													},
      													success: (data) => {
      														vk.vuex.set(
      															'$app.showIndexCoupou',
      															false
      														) //支付成功则取消首页优惠充值的弹窗
      														// 成功后的逻辑
      														console.log(
      															"注册登录成功",
      															vk
      															.vuex
      															.get(
      																'$user.userInfo'
      															));
      														that.info =
      															vk.vuex
      															.get(
      																'$user.userInfo'
      															)
      													}
      												});
      											},
      										})
      									},
      									fail(res) {
      										// 支付失败回调
      										console.log('支付失败：', res);
      									},
      									complete() {
      										// 支付结束回调（无论成功或失败都会执行）
      										console.log('支付结束');
      									},
      								}
      								wx.requestVirtualPayment(paymentParams);
      							}
      						});
      					}
      				});

      			},
      			jump(url) {
      				uni.navigateTo({
      					url: url
      				})
      			},
      			toast(title, icon = "none", mask = false) {
      				uni.showToast({
      					title,
      					icon,
      					mask,
      					duration: 1500
      				});
      			},
      			alert(content, title = "提示") {
      				uni.showModal({
      					title,
      					content,
      					showCancel: false
      				});
      			}
      		}
      	}
      </script>

      <style lang="scss" scoped>
      	.boxTemplate {
      		width: 730rpx;
      		margin: 0 auto;
      		display: flex;
      		flex-wrap: wrap;

      		.Scheme {
      			width: 350rpx;
      			height: 180rpx;
      			margin: 20rpx 0;

      			.Schemecontent {
      				width: 94%;
      				height: 180rpx;
      				border-radius: 12rpx;
      				margin: 0 auto;
      				position: relative;
      				background-image: url(https://7463-tcb-z5t43ep54akwmhw-3cvvc2867b7c-1320331498.tcb.qcloud.la/static/tehui.png);
      				background-size: 100% 180rpx;

      				view {
      					position: absolute;
      				}

      				.Judge {
      					padding: 0px 40rpx;
      					text-align: center;
      					color: #e5563b;
      					background-image: url(https://7463-tcb-z5t43ep54akwmhw-3cvvc2867b7c-1320331498.tcb.qcloud.la/static/tehuis.png);
      					background-size: 100% 100%;
      					border-radius: 12rpx 0 12rpx 0;
      					font-size: 26rpx;
      					font-weight: 600;
      				}

      				.RechargeAmount {
      					font-weight: 600;
      					font-size: 36rpx;
      					left: 5%;
      					top: 25%;
      				}

      				.GiveBean {
      					padding: 0 20rpx;
      					font-size: 24rpx;
      					font-weight: 600;
      					background-color: #f55125;
      					color: #fff;
      					border-radius: 50rpx;
      					left: 40%;
      					top: 29%;
      				}

      				.RechargeText {
      					font-size: 28rpx;
      					font-weight: 600;
      					left: 8%;
      					top: 48%;
      				}

      				.PercentageUser {
      					color: #e37f75;
      					font-size: 24rpx;
      					font-weight: 600;
      					right: 20rpx;
      					bottom: 10rpx;
      				}
      			}

      			.Schemecontents {
      				width: 94%;
      				height: 180rpx;
      				border-radius: 12rpx;
      				margin: 0 auto;
      				background-color: #fff;
      				position: relative;

      				view {
      					position: absolute;
      				}


      				.RechargeAmount {
      					font-weight: 600;
      					font-size: 36rpx;
      					left: 3%;
      					top: 20%;
      				}

      				.GiveBean {
      					padding: 0rpx 20rpx;
      					font-size: 24rpx;
      					font-weight: 600;
      					background-color: #f55125;
      					color: #fff;
      					border-radius: 50rpx;
      					left: 38%;
      					top: 24%;
      				}

      				.RechargeText {
      					font-size: 24rpx;
      					font-weight: 600;
      					left: 5%;
      					top: 48%;
      				}
      			}

      			.Schemecontentss {
      				width: 94%;
      				height: 180rpx;
      				border-radius: 14rpx;
      				margin: 0 auto;
      				position: relative;
      				background-image: url("https://7463-tcb-z5t43ep54akwmhw-3cvvc2867b7c-1320331498.tcb.qcloud.la/static/huiyuan.png");
      				background-size: 100% 180rpx;

      				view {
      					position: absolute;
      				}

      				.Judge {
      					padding: 0px 40rpx;
      					text-align: center;
      					color: #e5563b;
      					background-color: #fafc43;
      					border-radius: 12rpx 0 12rpx 0;
      					font-size: 26rpx;
      					font-weight: 600;
      				}

      				.RechargeAmount {
      					color: #ffffff;
      					font-weight: 600;
      					font-size: 32rpx;
      					left: 5%;
      					top: 25%;
      				}

      				.RechargeText {
      					color: #f2e4d8;
      					font-size: 28rpx;
      					font-weight: 500;
      					left: 5%;
      					top: 48%;
      				}

      			}
      		}
      	}

      	.top_balance {
      		display: flex;
      		align-items: center;
      		font-size: 32rpx;
      		margin: 60rpx 0 20rpx 20rpx;
      		width: 680rpx;
      		white-space: nowrap;
      		overflow: hidden;
      		text-overflow: ellipsis;
      	}

      	.dou {
      		color: #fe742c;
      		font-weight: 600;
      		font-size: 36rpx;
      		margin: 0 20rpx 0 0;
      	}

      	.explanation {
      		color: #606060;
      		font-size: 22rpx;
      		line-height: 40rpx;
      		margin-left: 20rpx;
      	}
      </style>